<template>
  <div>
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      title="时政"
      sub-title="时事政治"
      @back="() => $router.go(-1)"
    />
    <div
      class="right-list"
      @click="bounceToDetail(item.iid)"
      v-for="item in newsListStore.newListdemo"
    >
      <div class="img">
        <img :src="item.image" alt="" />
      </div>
      <div class="paper">
        <h3>{{ item.title }}</h3>
        <p>{{ item.paper }}</p>
      </div>
    </div>

    <div class="demo-pagination-block">
      <a-pagination
        v-model:current="currentPage"
        :pageSize="pageSize"
        :total="newsListStore.total"
        show-less-items
        @showSizeChange="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import type { CSSProperties } from 'vue'
import { useNewsListStore } from '@/stores/news/news'
import { useRouter, useRoute } from 'vue-router'

const newsListStore = useNewsListStore()

const currentPage = ref(1)
const pageSize = ref(5)

const small = ref(false)

const handleCurrentChange = (currentPage: number, pageSize: number) => {
  console.log(currentPage, pageSize, '0000000000')
}
watch(pageSize, () => {
  console.log('pageSize', pageSize.value)
})
watch(currentPage, () => {
  console.log('current', currentPage.value)
  feachPage()
})

feachPage()

//跳转到详情页

function feachPage(formData: any = {}) {
  //1.获取offset/size/ page,limit,
  const pagesize = pageSize.value //绑定每页数量，有5,10,15选项
  const currentpage = currentPage.value

  const limit = (currentpage - 1) * pagesize //跳过多少条，第一页跳过0条，第二页跳过5条
  //   console.log(currentpage, '11111')
  const pageInfo = { currentpage, pagesize }
  //   const searchInfo = { ...pageInfo, ...formData }
  //   console.log(searchInfo, '0000')
  // 2.发起网络请求
  newsListStore.newsListResultAction(pageInfo)
}

//跳转到详情页

const router = useRouter()
const route = useRoute()
const iid = route.params.iid

// console.log(router.params, '33333')

function bounceToDetail(iid: number) {
  router.push({
    path: `/newsdetail/${iid}`,
  })
}

//暴露出去网络请求
defineExpose({ feachPage })
const cardStyle: CSSProperties = {
  width: '100%',
}
const imgStyle: CSSProperties = {
  display: 'block',
  width: '200px',
  height: '150px',
}
</script>
<style lang="less" scoped>
.right-list {
  display: flex;
  border-bottom: 1px solid#eee;
  margin: 20px 0;
  // padding-top: 50px;
  .img img {
    display: block;
    width: 120px;
    border: 1px solid #eee;
  }
  .paper {
    margin-left: 15px;
    margin-right: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    h3 {
      font-size: 16px;

      margin-bottom: 10px;
    }
    p {
      font-size: 14px;
    }
  }
}
:deep(.ant-flex-justify-space-between) {
  justify-content: flex-start;
}
</style>
